import React, { useRef, useState, useEffect } from 'react'
import { PageContainer } from '@ant-design/pro-layout'
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Avatar, Switch, message, Image } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getGoods,isOn,isRecommend } from '@/services/goods'
import { set } from 'lodash';
import CreateOrEdit from './components/CreateOrEdit';

const Goods = () => {
  //表格的ref，便于自定义操作表格
  const actionRef = useRef()
  //将表单初始化的值设置为状态，在编辑的时候，使用这个状态
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [editId, setEditId] = useState(undefined)
  //是否上架商品
  const handleIsOn = async (goodsId) => {
    const res = await isOn(goodsId)
    if (res.status === undefined) {
      message.success('操作成功')
    } else {
      message.error('操作失败')
    }
  }
  //是否推荐商品
  const handleIsRecommend = async (goodsId) => {
    const res = await isRecommend(goodsId)
    if (res.status === undefined) {
      message.success('操作成功')
    } else {
      message.error('操作失败')
    }
  }
  //控制模态框显示和隐藏
  const isShowModal = (show, id = undefined) => {
    setEditId(id)
    setIsModalVisible(show)
  }

  const columns = [
    {
      title: '商品主图',
      dataIndex: 'cover_url',
      hideInSearch: true,
      render: (_, record) => <Image width={64} src={record.cover_url}
      />
    }, {
      title: '名称',
      dataIndex: 'title'
    }, {
      title: '价格',
      dataIndex: 'price',
      hideInSearch: true
    }, {
      title: '库存',
      dataIndex: 'stock',
      hideInSearch: true,
    }, {
      title: '销量',
      dataIndex: 'sales',
      hideInSearch: true
    }, {
      title: '是否上架',
      dataIndex: 'is_on',
      render: (_, record) => <Switch checkedChildren="已上架" unCheckedChildren="未上架"
        defaultChecked={record.is_on === 1} onChange={() => handleIsOn(record.id)} />,
      valueType: 'radioButton',
      valueEnum: {
        1: { text: '已上架' },
        0: { text: '未上架' }
      }
    }, {
      title: '是否推荐',
      dataIndex: 'is_recommend',
      render: (_, record) => <Switch checkedChildren="已推荐" unCheckedChildren="未推荐"
        defaultChecked={record.is_recommend === 1} onChange={() => handleIsRecommend(record.id)} />,
      valueType: 'radioButton',
      valueEnum: {
        1: { text: '已推荐' },
        0: { text: '未推荐' }
      }
    }, {
      title: '创建时间',
      dataIndex: 'created_at',
      hideInSearch: true
    }, {
      title: '操作',
      render: (_, record) => <a onClick={() => isShowModal(true, record.id)}>编辑</a>,
      hideInSearch: true
    }
  ]
  //获取用户列表
  const getGoodsList = async (params) => {
    const res = await getGoods(params)
    return {
      data: res.data,
      success: true,
      total: res.meta.pagination.total
    }
  }
  return (
    <PageContainer>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => getGoodsList(params)}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="商品列表"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary"
            onClick={() => isShowModal(true)} >
            新建
          </Button>,
        ]}
      />
      {
        //模态框隐藏的时候，不挂载组件，模态框显示时候再挂载组件，这样是为了触发子组件的生命周期
        !isModalVisible ? '' :
          <CreateOrEdit isModalVisible={isModalVisible}
            isShowModal={isShowModal} actionRef={actionRef} editId={editId} />
      }

    </PageContainer>
  )
}

export default Goods
